<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单操作</title>
</head>
<body>
    <form>
        <div>
            <label for="username" >用户名:</label>
            <input type="text" id="username" value="大嘴特朗普">
        </div>
        <div>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd">
            <button id="mw">明文</button>
        </div>
        <div>
            <label >性别：</label>
            <label for="male">男</label>
            <input type="radio" id="male" name="gender" value="男">
            <label for="fmale">女</label>
            <input type="radio" id="fmale" name="gender" value="女">
        </div>
        <div>
            <label >爱好：</label>
            <label for="game">游戏</label>
            <input type="checkbox" id="game" name="fav" value="游戏">
            <label for="girl">美女</label>
            <input type="checkbox" id="girl" name="fav" value="美女" >
        </div>
    </form>
    <script>
        const userNameEle = document.getElementById('username')
        const pwdEle = document.getElementById('pwd')
        const mwEle = document.getElementById('mw')
        //设置值
        // userNameEle.value = "李大锤"//设置输入框的值
        //获取值
        userNameEle.value
        userNameEle.readOnly = true//设置为只读
        userNameEle.disabled = true//设置为不可用
        mwEle.onclick = function(e){
            //阻止按钮的默认行为，也就是提交表单
            e.preventDefault()
            if(pwdEle.type === "password" ){
                pwdEle.type = "text"
            }else{
                pwdEle.type = "password"
            }
        }
        const genderEles = document.getElementsByName('gender')
        genderEles[0].checked = true // 选中第一个
        const favEles = document.getElementsByName('fav')
        favEles[0].checked = true
    </script>
</body>
</html>